<html>
	<head>
		<script src="<?=base_url()?>assets/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="<?=base_url()?>assets/css/proposal_category_base.css" type="text/css" media="screen,print" title="" charset="utf-8">
		<link rel="stylesheet" href="<?=base_url()?>assets/css/tab-view.css" type="text/css" media="screen,print" title="" charset="utf-8">
		<script src="<?=base_url()?>assets/js/tab-view.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
var GLOBAL_msg = null;
function ajaxFunction()
	{
		var ajaxRequest;  // The variable that makes Ajax possible!
		try
			{
				// Opera 8.0+, Firefox, Safari
				ajaxRequest = new XMLHttpRequest();
			} 
		catch (e)
			{
				// Internet Explorer Browsers
				try
					{
						ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
					} 
				catch (e) 
					{
						try
							{
								ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
							} 
						catch (e)
							{
								// Bhenji Khabhi Chrome bhi use kiya karo
								alert("Bhenji Khabhi Chrome bhi use kiya karo!");
								return false;
							}
					}
			}
		// Create a function that will receive data sent from the server
		ajaxRequest.onreadystatechange = function()
			{
				if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200)
					{
						document.getElementById("Dynamic_content").innerHTML = ajaxRequest.responseText;
					}
			}
		/*
		var age = document.getElementById('age').value;
		var wpm = document.getElementById('wpm').value;
		var sex = document.getElementById('sex').value;
		var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
		*/
		ajaxRequest.open("POST", "tab_view", true);
		ajaxRequest.send(module_id=0);						
	}	
				
document.onclick=function(e)
{
	var node = e.srcElement == undefined ? e.target : e.srcElement;
	if (node.nodeName == "LI" || node.nodeName == "li" || node.nodeName == "SPAN" || node.nodeName == "span") 
		{
			ajaxFunction()
			var list_tree = document.getElementById('list_tree');
			list_tree.style.display = "inline";
			/*
			var id = node.getAttribute("id");
			id = id + node.nodeName;
			document.getElementById("DisplayInfo").innerHTML = ajaxRequest.responseText;
			*/
		}
}
document.onmouseover=function(e)
{
	var node = e.srcElement == undefined ? e.target : e.srcElement;
		if (node.nodeName == "LI" || node.nodeName == "li") 
			{
				node.style.fontWeight= "bold";
				showRollover(e, node.innerHTML);
			}
}
document.onmouseout=function(e)
{	
	var node = e.srcElement == undefined ? e.target : e.srcElement;
		if (node.nodeName == "LI" || node.nodeName == "li") 
			{
				node.style.fontWeight = "normal";
				clearRollover(e);
			}
}
function showRollover(e, msg) 
	{
		if (!e) 
			{ 
				e = window.event;
			}
		if (GLOBAL_msg == null) 
			{
				GLOBAL_msg = msg;
			}
		var clientX = e.clientX + 15;
		var clientY = e.clientY + 10;
		var rollover = document.getElementById('Rollover');
		rollover.innerHTML = GLOBAL_msg;
		rollover.style.marginTop = clientY + "px";
		rollover.style.marginLeft = clientX + "px";
		rollover.style.display = "inline";
		document.onmousemove = showRollover;
	}
function clearRollover(e) 
	{
		if (!e) 
			{ 
				e = window.event;
			}
		var rollover = document.getElementById('Rollover');
		rollover.style.display = "none";
		GLOBAL_msg = null;
		document.onmousemove = null;
	}	
</script>
	</head>

	<body>

		<div class='row-fluid'>
					
			<div id="Dynamic_content" class='span9'>
				
				
				<div id="DisplayInfo">Front page message show in the start of the page as seen on load. Message changes on click on the tree menu.</div>
			</div>
	
		<div class='span3' id="list_tree">
			
			<h2>	
				<span id="0">
					Categories
				</span>
			</h2>	
				<ul>
					<li id="1">
						Design & Development
					</li>
						<ul>
							<li id="2">
								Web Development
							</li>
								<ul>					
									<li id="3">
										Web 2.0
									</li>
										
										<li id="4">
											Web Portal
										</li>
										
										<li id="5">
											Mobile Apps Development
										</li>
										
										<li id="6">
											ERP Development
										</li>
									</ul>
								<li id="7">
									CMS Development
								</li>
									<ul>
										<li id="8">
											Wordpress
										</li>
										
										<li id="9">
											Joomla
										</li>
										
										<li id="10">
											Open CMS
										</li>
										
										<li id="11">
											Drupal
										</li>
										
										<li id="12">
											Concrete5
										</li>
										
										<li id="13">
											Typo3
										</li>
										
										<li id="14">
											Contoo
										</li>
											<ul style="list-style: none">
												<li><i class="icon-file-text-alt"></i> 
													Module 1
												</li>
											</ul>
									</ul>
								<li id="15">
									E-Commerce
								</li>
									<ul>
										<li id="16">
											OS Commerce
										</li>
										
										<li id="17">
											Magento
										</li>
										
										<li id="18">
											Open Cart
										</li>
									</ul>
								<li id="19">
									Graphic Design
								</li>
									<ul>
										<li id="20">
											Logo
										</li>
										
										<li id="21">
											Cover Design
										</li>
										
										<li id="23">
											Poster Design
										</li>
									</ul>
							</ul>
							
							<li id="25">
								Domain & Hosting
							</li>
							<ul>
								<li id="26">
									Managed Hosting
								</li>
									<ul>
										<li id="27">
											Shared Hosting
										</li>
										
										<li id="28">
											Grid Hosting
										</li>
										
										<li id="29">
											VPS Hosting
										</li>
										
										<li id="30">
											Dedicated Hosting
										</li>
									</ul>
								<li id="31">
									CMS Hosting
								</li>	
								<li id="32">
									Hosting Resources
								</li>
									<ul>
										<li id="33">
											Website Maintenance
										</li>
									</ul>	
							</ul>		
							<li id="34">
								Internet Marketing
							</li>
									<ul>
										<li id="35">
											SEO Services
										</li>
										<ul>
											<li id="36">
												On Page optimization
											</li>
											
											<li id="37">
												Link Building
											</li>
											
											<li id="38">
												PPC Management
											</li>
											
											<li id="39">
												Inbound Marketing
											</li>
										</ul>
										<li id="40">
											SMO Services
										</li>
										
										<li id="41">
											SEO Content Writing
										</li>
										
										<li id="42">
											Online Marketing
										</li>
									</ul>
						</ul>
						<div id="Rollover"></div>
											
							</div>
		</div>
	</body>
</html>